import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { useState, useRef } from 'react'
import { Carousel } from 'antd';
import img1 from '../../../../public/image1/Carousel1.webp'
import img2 from '../../../../public/image1/Carousel2.webp'
import img3 from '../../../../public/image1/Carousel3.webp'
import img4 from '../../../../public/image1/Carousel4.webp'
function HomeSwipet() {
  let imagesUrl: any = [
    { img: img1 },
    { img: img2 },
    { img: img3 },
    { img: img4 }
  ]
  const carousel: any = useRef(null)
  let [show,setShow]=useState(false)
// 鼠标点击上一页 
  const handlePrevClick=()=>{
    if(carousel.current){
      carousel.current.prev()
    }
  }
//  鼠标点击下一页
  const handleNextClick=()=>{
    if(carousel.current){
      carousel.current.next()
    }
  }
  // 鼠标移入 
  const handleMouseEnter=()=>{
    setShow(true)
  }
 // 鼠标移出 
  const handleMouseLeave=()=>{
    setShow(false)
  }


  return (
    <div className='swiper' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
      
      <Carousel ref={carousel}  infinite={true} autoplay={true} autoplaySpeed={2000}>
        {
          imagesUrl.map((item: any) => (
            <img src={item.img} key={item} alt="" />
          ))
        }
      </Carousel>
      {
        show ?
        <>
        {/* 左侧滚动按钮  */}
          <button onClick={handlePrevClick} className='Swiper_left'>
            <LeftOutlined/>
          </button>
          {/* 右侧滚动按钮 */}
          <button onClick={handleNextClick} className='Swiper_right'>
            <RightOutlined/>
          </button>
        </>:''
      }
    </div>
  )
}

export default HomeSwipet
